<template>
  <div class="liveCourses">
    <header class="liveText">直播课程</header>
    <div class="liveClassBox" v-for="(item, index) in liveData" :key="index">
      <div class="liveLeftImg">
        <img :src="item.course.coverFileUrl" alt="" />
      </div>
      <div class="liveRightText">
        <p class="livePlateTitle">
          {{ item.course.courseTitle }}
        </p>
        <p v-if="item.nextStartTime" class="liveIsEnd"><van-icon name="play-circle-o" class="liveIcon" /> 暂未开播</p>
        <p v-else class="liveIsEnd"><van-icon name="passed" class="liveIcon"/> 直播结束</p>
        
        <p v-if="item.nextStartTime" class="liveTime">
            下次开播:{{ item.nextStartTime }}
        </p>
        <p v-else class="liveTime">
            全部章节直播已结束
        </p>
      </div>
    </div>
  </div>
</template>
 <script>
import { LiveStreaming } from "../../../api/index-api";

export default {
  name: "LiveCourses",
  data() {
    return {
      liveData: null, //直播课程数据
    };
  },
  methods: {},
  created() {
    //  请求直播课程数据
    LiveStreaming().then((res) => {
      this.liveData = res.rows;
      
    });
  },
  
};
</script>

 <style scoped lang="less">
.liveText {
  margin: 20px 0;
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
  color: #333;
}
.liveClassBox {
  display: flex;
  margin-top: 15px;
  .liveLeftImg {
    width: 43%;
    padding: 0 10px;
    img {
      width: 100%;
      height: 93px;
      border-radius: 7px;
    }
  }
  .liveRightText {
    width: 50%;
    padding-left: 10px;
    .livePlateTitle,p{ 
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
        font-size: 14px;
        margin-top: 5px;
    }
    p{
        margin: 13px 0 ;
    }
  }
}
.liveIsEnd{
        color: #00cf8c;
    font-size: 12px;
    width: 100%;

}
.liveTime{
   
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 12px;
}
.liveIcon{
  vertical-align: middle;
}
</style>